<template>
	<e-popup :show="showCouponPop" round="20rpx"  :style="[AppSkinVar]">
		<view class="">
			<view class="u-flex u-flex-xy-center u-padding-24">
				<text class="c-333 u-font-32 fw-600">{{$t('order.优惠详情')}}</text>
				<image class="img-36 u-abso coupon-close" :src="$staticPath('classify/close.png')" mode="aspectFit"
					@tap="showCouponPop = false"></image>
			</view>
			<view class="u-font-24 c-80 u-padding-36 u-m-b-24">
				{{$t('order.优惠券说明')}}
			</view>
			<view
				class="u-font-26 c-333 fw-600 u-m-b-30 u-flex u-flex-between u-p-l-36 u-p-r-36"
				v-if="!isOpen">
				<view class="u-flex">
					{{$t('classify.组合优惠')}}
				</view>
				<view class="u-flex">
					<!-- <text class="u-m-r-10"
						:style="{color:AppSkin.primary}">{{$t('classify.减')}}{{$unitEn}}{{couponList | getAllMoney}}</text> -->
					<image v-if="isOpen === 1" class="img-36" :src="$staticPath('classify/black-radio.png')" mode="">
					</image>
					<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleChangeUse(1)">
					</image>
				</view>
			</view>
			<view class="u-padding-36 coupon-body" v-if="isOpen && couponList.length">
				<view class="u-m-b-30" v-for="item in couponList" :key="item.storeId" @tap="handleChangeSelect(item)">
					<view class="u-font-24 c-333 fw-600 u-m-b-30 u-flex" v-if="!isPlat">
						<image class="img-36 u-m-r-10" :src="$fullLink(item.storeLogo)" mode=""></image>
						<text>{{item.storeName}}</text>
					</view>
					<view class="u-m-b-20 u-flex u-flex-between">
						<text><text>{{$t(isPlat ? 'order.平台优惠' : 'classify.店铺优惠')}}</text></text>
						<view class="u-flex">
							<text
								:style="{color: AppSkin.primary}" class="u-m-r-10">{{$t('classify.减')}} {{$unitEn}}{{item.money}}</text>
								<image v-if="item.check" class="img-36" :src="$staticPath('classify/selected-radio.png')" mode=""></image>
								<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode=""></image>
						</view>
					</view>
					<view class="u-flex u-flex-wrap u-m-b-24">
						<view class="image-list u-m-r-20 u-m-b-10" v-for="(url,index) in item.productUrls" :key="index">
							<image class="img-138" :src="$fullLink(url)" mode="aspectFit"></image>
						</view>
					</view>
					<view class="u-flex u-m-b-20  u-font-20"  v-if="!isPlat">
						<view class="coupon-type-box" :style="{color:AppSkin.primary, 'border-color': AppSkin.primary}"
							v-if="item.couponType === 1">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}} {{item.minPoint}} {{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
							<text v-else>
								{{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
						</view>
						<view class="coupon-type-box" :style="{color:AppSkin.primary, 'border-color': AppSkin.primary}"
							v-else-if="item.couponType === 2">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('public.打')}} {{item.discountScale}}{{$t('public.折')}}
							</text>
							<text v-else>
								{{$t('public.打')}}{{item.discountScale}}{{$t('public.折')}}
							</text>
						</view>
						<view class="coupon-type-box" :style="{color:AppSkin.primary, 'border-color': AppSkin.primary}"
							v-else>
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('classify.折扣')}} {{item.discountScale}}%
							</text>
							<text v-else>
								{{item.discountScale}}%
							</text>
						</view>
						<view class="u-m-l-20 c-303133 u-font-24">
							{{$t('nearby.小计')}}: {{$unitEn}}{{item.moneyAll}}，{{$t('classify.减')}} {{$unitEn}}{{item.money}}
						</view>
					</view>
					<view class="u-flex u-font-20" v-if="isPlat">
						<view class="coupon-type-box" :style="{color:AppSkin.primary, 'border-color': AppSkin.primary}"
							v-if="item.couponType === 1">
							<text v-if="item.minPoint">
								{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
							<text v-else>
								{{$t('classify.减')}} {{$unitEn}}{{item.money}}
							</text>
						</view>
						<view class="coupon-type-box" :style="{color:AppSkin.primary, 'border-color': AppSkin.primary}"
							v-else>
							<text v-if="item.minPoint">
								<template v-if="item.couponType == 2">{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('public.打')}} {{item.discountScale}}{{$t('public.折')}}</template>
								<template v-else>{{$t('public.满')}} {{$unitEn}}{{item.minPoint}} {{$t('public.打')}} {{item.discountScale}}%</template>
								
							</text>
							<text v-else>
								<template v-if="item.couponType == 2">{{$t('public.打')}} {{item.discountScale}}{{$t('public.折')}}</template>
								<template v-else>{{$t('public.打')}} {{item.discountScale}}%</template>
							</text>
						</view>
						<view class="u-m-l-20 c-303133 u-font-24">
							{{$t('nearby.小计')}} {{$unitEn}}{{item.moneyAll}}，{{$t('classify.减')}} {{$unitEn}}{{item.money}}
						</view>
					</view>
				</view>
			</view>
			<view class="u-padding-36 u-flex u-flex-between ">
				<text class="u-font-24 c-333 fw-600">{{$t('order.不使用')}}</text>
				<image v-if="isOpen === 0" class="img-36" :src="$staticPath('classify/black-radio.png')" mode="">
				</image>
				<image v-else class="img-36" :src="$staticPath('classify/radio.png')" mode="" @tap="handleChangeUse(0)"></image>
			</view>
			<view class="btn-box u-flex u-flex-center bg-primary" @tap="handleSubmit">
				<text class="fw-500 u-font-28 c-white">{{$t('common.确定')}}</text>
			</view>
		</view>
	</e-popup>
</template>

<script>
	// 所有一级页面均需引入skinMixIn，在页面的最顶级元素中设置css变量，skinMixIn包含AppSkin与AppSkinVar，AppSkin为当前设置的皮肤，AppSkinVar返回一个皮肤对象，对象内包含所有颜色的css变量
	import skinMixIn from 'common/mixin/skinMixIn.js'
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
		options: {
			virtualHost: true
		},
		// #endif
		mixins: [skinMixIn],
		props: {
			value: Boolean,
			isPlat:Boolean,// 是否平台优惠
			couponList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				showCouponPop: false,
				isOpen: 1
			}
		},
		watch: {
			value(val) {
				this.showCouponPop = val
			},
			showCouponPop(val) {
				if (!val) {
					this.$emit('input', val)
				}
			},
			couponList(val) {
				const flag = val?.some(item => item.check)
				this.isOpen = flag ? 1 : 0
			}
		},
		filters: {
			formatTime(val) {
				return val.toString().indexOf('.') !== -1 ? val.toFixed(2) : val
			}
		},
		methods: {
			handleChangeUse(type) {
				this.isOpen = type
				if (this.isOpen) {
					const flag = this.couponList.every(evy => !evy.check)
					if (flag) {
						this.couponList.sort((a,b) => b.money - a.money)
						this.couponList[0].check = true
					}
				} else {
					this.$emit('closeUse')
				}
			},
			handleSubmit() {
				this.$emit('changeCouponStatus', this.couponList)
				this.showCouponPop = false
			},
			handleChangeSelect(opt) {
				this.couponList.forEach(item => {
					if (item.id === opt.id) {
						item.check = true
					} else {
						item.check = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon-close {
		top: 24rpx;
		right: 24rpx;
	}

	.c-80 {
		color: #808080;
	}

	.btn-box {
		height: 80rpx;
		border-radius: 40rpx;
		margin: 30rpx;
	}

	.u-flex-wrap {
		flex-wrap: wrap;
	}

	.coupon-type-box {
		border: 1rpx solid;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
	}

	.img-138 {
		width: 138rpx;
		height: 138rpx;
		border-radius: 10rpx;
	}
	.coupon-body {
		max-height: 800rpx;
		overflow: auto;
	}
</style>
